<template>
  <div class="index-body">
    <div>
<!--      <div style="display:flex;align-items: center;margin-bottom:20px;">
        <el-select v-model="dataType" placeholder="">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span style="cursor:pointer;display:block;padding-left:40px;">{{$t('index.updateTime')}}:{{dataList.updateTime}}
            <el-button type="primary" @click="updateNow" style="margin-left: 10px;">{{$t('index.updateNow')}}</el-button>
        </span>
      </div>-->
      <div class="user">
        <div class="content_title">用户</div>
        <div class="index-row">
          <index-card title="总注册人数" unit="个" :icon="require('@/assets/icons/index/item1_1.png')" :value="dataList.totalRegister" :today="dataList.register" :yesterday="dataList.yesterdayRegister	" tileL="今日总注册人数" titleR="较昨日总注册人数"  />

          <index-card title="当天提现人数" unit="个" :icon="require('@/assets/icons/index/item2_1.png')" :value="dataList.totalWithdrawalPeople" :today="dataList.withdrawalPeople" tileL="今日当天提现人数" />

          <!-- <index-card title="$t('index.WithdrawalAmount')" unit="个" :icon="require('@/assets/icons/index/item2_2.png')" todayLabel="$t('index.today') + $t('index.WithdrawalAmount')" :yesterday="dataList.yesterdayWithdrawalAmount" :value="dataList.totalWithdrawalAmountNoPass" :today="dataList.todayWithdrawalAmountNoPass" /> -->

          <index-card title="充值人数" unit="个" :icon="require('@/assets/icons/index/item2_3.png')" :value="dataList.totalRechargePeople" :today="dataList.rechargePeople" tileL="今日充值人数" />

        </div>
        <div class="index-row">
          <index-card title="充值金额" unit="$" :icon="require('@/assets/icons/index/item1_2.png')" :value="dataList.totalRecharge" :today="dataList.recharge"  tileL="今日充值金额" />

          <index-card title="提款金额" unit="$" :icon="require('@/assets/icons/index/item1_4.png')" :value="dataList.totalWithdrawal" :today="dataList.withdrawal"  tileL="今日提款金额" />
        </div>
      </div>
      <div class="anchor">
        <div class="content_title">主播</div>
        <div class="index-row">
          <!-- <index-card title="$t('index.numberBusinesses')" unit="个" :icon="require('@/assets/icons/index/item3_1.png')" todayLabel="$t('index.today') + $t('index.numberBusinesses')" :yesterday="dataList.yesterdayShopNum" :value="dataList.totalShopNum" :today="dataList.todayShopNum" /> -->
          <index-card title="主播数量" unit="个" :icon="require('@/assets/icons/index/item3_3.png')" :value="dataList.anchorTotal" :today="dataList.newToday" tileL="今日总主播人数" />
          <index-card title="短视频数量" unit="个" :icon="require('@/assets/icons/index/item3_2.png')" tileL="今日总主播人数" :value="dataList.videoTotal" :today="dataList.newToday" />
          <index-card title="主播直播视频数量" unit="个" :icon="require('@/assets/icons/index/item3_4.png')" :value="dataList.totalAnchorVideoNum">
            <template slot="footer">
                        <span style="visibility: hidden">
                            <span style="vertical-align: middle">主播直播视频数量 </span>
                            <img style="vertical-align: middle" width="15px" height="15px" src="@/assets/icons/index/increase.png" />
                            <span style="vertical-align: middle"> 12.5% </span>
                        </span>
            </template>
          </index-card>
        </div>
        <div class="content_title">店铺</div>
        <div class="index-row">
          <index-card title="总店铺数量" unit="个" :icon="require('@/assets/icons/index/dianpu.png')" :value="dataList.totalShop" :today="dataList.increaseShop" tileL="今日总店铺数量">
          </index-card>
          <index-card title="店铺销量" unit="个" :icon="require('@/assets/icons/index/item1_4.png')" :value="dataList.totalShopSell" :today="dataList.shopSell" tileL="今日店铺销量">
          </index-card>
          <index-card title="店铺销售额" unit="$" :icon="require('@/assets/icons/index/item1_4.png')" :value="dataList.totalSalesVolume" tileL="今日店铺销售额" :today="dataList.salesVolume	">
          </index-card>
        </div>
        <div class="index-row">
          <index-card title="店铺充值数量" unit="$" :icon="require('@/assets/icons/index/item1_4.png')" :value="dataList.totalShopCharge" :today="dataList.shopCharge" tileL="今日店铺充值数量">
          </index-card>
          <index-card title="店铺充值人数" unit="个" :icon="require('@/assets/icons/index/item1_1.png')" :value="dataList.totalShopChargeNum" tileL="今日店铺充值人数" :today="dataList.shopChargeNum">
          </index-card>
          <index-card title="店铺提现人数" unit="个" :icon="require('@/assets/icons/index/item1_1.png')" :value="dataList.totalShopWithdrawalNum" tileL="今日店铺提现人数" :today="dataList.shopWithdrawalNum">
          </index-card>
        </div>
<!--        <div class="index-row chart-row">
          <el-card>
            <div id="chart" style="height: 363px" />
          </el-card>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import {
  todayInfo,
  updateNow,
  statistics, todayInfoshop, anchorStatistics, videoStatistics
} from '@/api/home/home'

import IndexCard from '@/components/IndexCard/index.vue'
import * as echarts from 'echarts'

export default {
  components: {
    IndexCard,
  },
  data() {
    return {
      dataList: {},
      chart: null,
      type: localStorage.getItem("userType"),
      options: [{
        label: "内部",
        value: 1
      }, {
        label: "外部",
        value: 2
      }]
    }
  },
  created() {
    this.queryDate()
  },
  methods: {
    queryDate() {
      var obj1,obj2,obj3,obj4 = null
      todayInfo(1).then(res => {
        obj1 = res.data
      })
      todayInfoshop().then(res => {
        obj2 = res.data
      })
      anchorStatistics().then(res => {
        obj3 = res.data
      })
      videoStatistics().then(res => {
        obj4 = res.data
      })
      setTimeout(()=>{
        const dataList = this.dataList = Object.assign({}, obj1,obj2,obj3,obj4);
        this.$nextTick(() => {
          this.chart = echarts.init(document.getElementById('chart'))
          this.chart.setOption({
            title: {
              text: this.$t('index.allStore'),
              left: 'left'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              top: 'center'
            },
            series: [{
              name: this.$t('index.storeNum'),
              type: 'pie',
              radius: '50%',
              data: [{
                value: 12,
                name: this.$t('index.bronze')
              },
                {
                  value: 5,
                  name: this.$t('index.gold')
                },
                {
                  value: 43,
                  name: this.$t('index.whiteGold')
                },
                {
                  value: dataList.level4One,
                  name: this.$t('index.jade')
                },
                {
                  value: dataList.level5One,
                  name: this.$t('index.gemstone')
                }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }]
          })

          window.onresize = () => {
            this.chart.resize();
          }
        })
      },1000)
    },
    updateNow() {
      updateNow().then(res => {
        if (res.success) {
          this.queryDate();
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }

      })
    }
  },
}
</script>

<style lang="scss" scoped>
.el-card__body{
  height: auto;
}
.index-body {
  background: #f3f4f8;
  padding: 20px 20px 0 20px;
  height: 88vh;
  overflow: auto;
  min-height: inherit;

  .content_title {
    padding: 8px 0;
  }

  .index-row {
    column-count: 4;
    margin-bottom: 16px;

    &.chart-row {
      column-count: 2;
    }
  }

}
</style>
